<template>
  <div class="order-card" @click="onClick">
    <!-- 订单头部 -->
    <div class="order-header">
      <div class="order-id">
        <van-icon name="orders-o" />
        <span>订单号: {{ order.orderNo }}</span>
      </div>
      <div 
        class="order-status-badge"
        :style="{ backgroundColor: statusBgColor, color: statusColor }"
      >{{ statusText }}</div>
    </div>
    
    <!-- 订单内容 -->
    <div class="order-content">
      <div class="order-image">
        <img :src="order.image" :alt="order.product" />
      </div>
      <div class="order-details">
        <h4 class="order-product">{{ order.productName }}</h4>
        <p class="order-price">x{{ order.specCount }} {{ formatNumber(order.price) }}{{ order.currency}}</p>
        <div class="order-date">
          <van-icon name="clock-o" />
          <span>{{ order.updatedAt }}</span>
        </div>
      </div>
    </div>
    
    <!-- 订单操作 -->
    <div class="order-actions">
      <!-- 动态渲染订单操作按钮 -->
      <template v-for="action in orderActions" :key="action.name">
        <van-button 
          size="small" 
          :type="action.type"
          :plain="action.type !== 'danger' && action.type !== 'primary'"
          :class="`${action.name}-button`"
          @click.stop="handleAction(action.name)"
        >{{ action.text }}</van-button>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { 
  getOrderStatusText, 
  getOrderStatusColor, 
  getOrderStatusBgColor,
  getOrderActions,
} from '@/utils/orderStatus'
import { formatNumber } from '@/utils/utils'

const props = defineProps({
  order: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click', 'pay', 'confirm', 'cancel', 'refund', 'detail', 'delete', 'review', 'buyAgain'])

const onClick = () => {
  emit('click')
}

// 获取当前订单可执行的操作
const orderActions = computed(() => getOrderActions(props.order))

// 处理订单操作
const handleAction = (actionName) => {
  switch (actionName) {
    case 'pay':
      emit('pay')
      break
    case 'confirm':
      emit('confirm')
      break
    case 'cancel':
      emit('cancel')
      break
    case 'refund':
      emit('refund')
      break
    case 'detail':
      emit('detail')
      break
    case 'delete':
      emit('delete')
      break
    case 'review':
      emit('review')
      break
    case 'buyAgain':
      emit('buyAgain')
      break
    default:
      break
  }
}

// 使用订单状态工具函数
const statusText = computed(() => getOrderStatusText(props.order.status))
const statusColor = computed(() => getOrderStatusColor(props.order.status))
const statusBgColor = computed(() => getOrderStatusBgColor(props.order.status))
</script>

<style scoped>
.order-card {
  background-color: white;
  border-radius: var(--border-radius);
  margin-bottom: 16px;
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.order-id {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-color-light);
}

.order-id .van-icon {
  margin-right: 6px;
}

.order-status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.order-content {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.order-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.order-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.order-product {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.order-price {
  font-size: 17px;
  font-weight: bold;
  color: var(--danger-color);
  margin: 0 0 8px;
}

.order-date {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-color-lighter);
}

.order-date .van-icon {
  margin-right: 4px;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  gap: 8px;
  background-color: var(--background-color-light);
}

.pay-button {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
}

.confirm-button {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.cancel-button {
  border-color: #969799 !important;
  color: #969799 !important;
}

.detail-button {
  border-color: #c8c9cc !important;
  color: var(--text-color) !important;
}
</style>